<template>
  <view class="appointment-container">
    <!-- 顶部搜索栏 -->
    <view class="search-bar">
      <view class="search-box">
        <text class="iconfont icon-search"></text>
        <input type="text" :placeholder="$t('appointment.search.placeholder')" v-model="searchKey" />
      </view>
    </view>
    
    <!-- 医院列表 -->
    <view class="hospital-list">
      <view 
        class="hospital-item card"
        v-for="(hospital, index) in hospitals"
        :key="index"
      >
        <image :src="hospital.image" mode="aspectFill" class="hospital-image" />
        <view class="info">
          <text class="name">{{ hospital.name }}</text>
          <text class="address">{{ hospital.address }}</text>
          <view class="tags">
            <text v-for="(tag, idx) in hospital.tags" :key="idx">{{ tag }}</text>
          </view>
          <view class="footer">
            <view class="rating">
              <text class="score">{{ hospital.rating }}</text>
              <text class="label">综合评分</text>
            </view>
            <view class="distance">
              <text class="value">{{ hospital.distance }}km</text>
              <text class="label">距离</text>
            </view>
            <button 
              class="book-btn primary-btn"
              @tap.stop="selectHospital(hospital)"
            >
              立即预约
            </button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const searchKey = ref('')

// 医院列表数据
const hospitals = ref([
  {
    id: 1,
    name: '澳门镜湖医院',
    address: '澳门连胜马路33号',
    image: '/static/hospital/kiang-wu.png',
    tags: ['综合医院', '24小时急诊', '特需门诊'],
    rating: 4.8,
    distance: 2.5
  },
  {
    id: 2,
    name: '澳门科大医院',
    address: '澳门氹仔大学大马路',
    image: '/static/hospital/must.png',
    tags: ['大学医院', '专科门诊', '中医科'],
    rating: 4.7,
    distance: 5.8
  }
])

// 选择医院
const selectHospital = (hospital) => {
  // 保存当前选中的医院ID到全局状态
  getApp().globalData.currentHospitalId = hospital.id
  
  uni.navigateTo({
    url: `/pages/department/index?hospitalId=${hospital.id}`,
    fail: (err) => {
      console.error('导航失败:', err)
      // 如果导航失败，尝试使用 redirectTo
      uni.redirectTo({
        url: `/pages/department/index?hospitalId=${hospital.id}`,
        fail: (err2) => {
          console.error('重定向失败:', err2)
        }
      })
    }
  })
}
</script>

<style lang="scss">
.appointment-container {
  min-height: 100vh;
  background: $bg-color;
  
  .search-bar {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 20rpx 30rpx;
    background: #fff;
    box-shadow: $shadow-sm;
  }
  
  .hospital-list {
    padding: 20rpx;
    
    .hospital-item {
      margin-bottom: 20rpx;
      
      .hospital-image {
        width: 100%;
        height: 300rpx;
        border-radius: $radius-md;
        margin-bottom: 20rpx;
      }
      
      .info {
        .name {
          font-size: 34rpx;
          color: $text-primary;
          font-weight: bold;
          margin-bottom: 10rpx;
          display: block;
        }
        
        .address {
          font-size: 26rpx;
          color: $text-regular;
          margin-bottom: 16rpx;
          display: block;
        }
        
        .tags {
          margin-bottom: 20rpx;
          
          text {
            display: inline-block;
            font-size: 22rpx;
            color: $primary-color;
            background: $primary-light;
            padding: 4rpx 12rpx;
            border-radius: $radius-sm;
            margin-right: 10rpx;
            margin-bottom: 10rpx;
          }
        }
        
        .footer {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding-top: 20rpx;
          border-top: 1rpx solid #eee;
          
          .rating, .distance {
            display: flex;
            flex-direction: column;
            align-items: center;
            
            .score, .value {
              font-size: 32rpx;
              color: $primary-color;
              font-weight: bold;
              margin-bottom: 4rpx;
            }
            
            .label {
              font-size: 22rpx;
              color: $text-secondary;
            }
          }
          
          .book-btn {
            width: 160rpx;
            height: 60rpx;
            line-height: 60rpx;
            font-size: 26rpx;
            &:active {
              opacity: 0.8;
              transform: scale(0.95);
            }
          }
        }
      }
    }
  }
}
</style> 